<template>
    <rx-dialog @handOk="okFun" @cancel="cancel" :showok="false" >
        <div slot="toolbar">

            <a-button @click="handleUpload" type="primary" v-if="!showResult" :disabled="!enableUpload">
                {{$ti18('rxList.importBtn','导入')}}
            </a-button>

            <a-button @click="okFun" type="primary" v-if="showResult">
                {{$ti18('rxForm.okBtn','确定')}}
            </a-button>
        </div>
        <rx-layout>
            <div slot="center">
                <a-spin :tip="i18n('form.processing','正在处理...')" :spinning="isSpinning">
                    <div style="padding: 0 20px;overflow: hidden;">
                        <a-form :form="form">
                            <a-row>
                                <a-col span="12">
                                    <a-checkbox @click="selectOverride($event)" :defaultChecked="false" >
                                        <span style="font-weight: bold">
                                            {{i18n('form.theSameOverwrite','组编码相同则覆盖') }}
                                        </span></a-checkbox>
                                </a-col>
                                <a-col span="12" style="text-align: right;">
                                    {{i18n('form.templateDownload','模板下载:') }}
                                    <a :href="docPath +'osGroupTemplate.xlsx'" :download="i18n('form.osGroupTemplate','用户组导入模板').xlsx">
                                        {{i18n('form.osGroupTemplate','用户组导入模板') }}.xlsx
                                    </a></a-col>
                            </a-row>
                            <a-row  style="margin-top: 20px;">
                                <a-col span="4">
                                    {{i18n('form.selectFile','选择文件:') }}
                                </a-col>
                                <a-col span="20">
                                    <a-upload
                                        accept=".xls,.xlsx"
                                        :multiple="false"
                                        :file-list="fileList"
                                        :before-upload="beforeFileUpload"
                                        :remove="removeFile"
                                        :customRequest="customUpload"
                                    >
                                        <a-button>
                                            <a-icon type="folder-open"/>
                                            {{$ti18('rxList.select','选择')}}
                                            ...
                                        </a-button>
                                    </a-upload>
                                </a-col>
                            </a-row>

                            <a-row v-if="showResult">
                                <a-col span="4">
                                    {{i18n('form.importResults','导入结果:') }}
                                </a-col>
                                <a-col span="20">
                                    <a-textarea v-model="result"></a-textarea>
                                </a-col>
                            </a-row>

                        </a-form>
                    </div>
                </a-spin>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import {BaseForm, RxDialog,  Util} from "@lowcode/jpaas-common-lib";
import SysAppApi from "@/api/system/core/sysApp";
import OsGroupApi from "@/api/user/org/osGroup";
export default {
    name: 'OsGroupImport',
    mixins: [BaseForm],
    components: {
        RxDialog
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        callback: {
            type: Function
        }
    },
    data() {
        return {
            isSpinning: false,
            step: 1,
            fileList: [],
            file: {},
            showOkBtn: false,
            override:false,
            docPath:  process.env.VUE_APP_ADMIN_FRONT + "/doc/",
            enableUpload:false,
            showResult:false,
            result:""
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"osGroup",key);
        },
        removeFile(info) {
            this.fileList.splice(0, 1);
            this.file = {};
        },
        selectOverride(){
            let chk=false;
            if(event){
                chk=event.target.checked;
            }
            this.override=chk;
        },
        beforeFileUpload(file) {
            if (!file || !file.type ) {
                this.$confirm({
                    title: this.$ti18('rxMsa.masWarn.delInfo','警告'),
                    zIndex: 20000,
                    content: this.i18n('form.excelError','Excel导入格式错误！'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                });
                return;
            }

            this.enableUpload=true;
            this.file = file;
            this.fileList.push({
                uid: file.uid,
                name: file.name,
                status: 'done'
            });
            //限制只能上传一个文件
            this.fileList = this.fileList.slice(-1);
            return true;
        },
        async uploadFile(formData) {
            let self = this;
            this.isSpinning = true;
            await OsGroupApi.importData(formData).then(res => {
                self.isSpinning = false;
                //关闭弹窗
                self.enableUpload=false;

                self.showResult=true;

                self.result=res.message;

            });
        },
        handleUpload() {
            if (this.fileList.length === 0) {
                this.$confirm({
                    title: this.$ti18('rxMsa.masWarn.delInfo','警告'),
                    zIndex: 20000,
                    content: this.i18n('form.excelError','Excel导入格式错误！'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                });
                return;
            }
            const formData = new FormData();
            formData.append("override",Util.encryptWord(this.override,true));
            let timestamp = new Date().getTime();
            formData.append("time", Util.encryptWord(timestamp,true));
            formData.append('file', this.file);
            this.uploadFile(formData);
        },
        okFun() {
            Util.closeWindow(this, "ok");
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        customUpload(){}
    },
    watch:{
        fileList:{
            handler:function (val,oldVal){
                if(val.length==0){
                    this.enableUpload=false;
                }
            },
            deep:true
        }
    }
}
</script>
<style scoped>
.title-div {
    padding: 10px 0;
    font-weight: bold;
    color: navy;
}

* >>> .ant-table-thead > tr > th {
    text-align: center;
}

* >>> .ql-snow .ql-picker-label::before {
    vertical-align: top;
}

* >>> .ql-snow .ql-color-picker .ql-picker-label svg,
* >>> .ql-snow .ql-icon-picker .ql-picker-label svg {
    vertical-align: top;
}

.avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>